import 'package:get/get.dart';
import 'package:inmotion_pro/config/r.dart';
import 'package:inmotion_pro/l10n/local.dart';
import 'package:inmotion_pro/pages/models/vehicle_model.dart';
import 'package:inmotion_pro/utils/date_format_util.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:lx_widgets_library/lx_widgets_library.dart';

/// 车辆List item视图
class VehicleItemView extends StatelessWidget {
  // 车辆模型
  final VehicleModel model;
  // 选中事件
  final Function(VehicleModel)? selectOnTap;
  // 删除事件
  final Function(VehicleModel)? deleteOnTap;
  // 高度
  final double height;
  // 是否显示banner
  final bool showBanner;

  const VehicleItemView({
    super.key,
    required this.model,
    required this.height,
    this.selectOnTap,
    this.deleteOnTap,
    this.showBanner = false,
  });

  @override
  Widget build(BuildContext context) {
    double radius = 12;

    return ClipRRect(
      borderRadius: BorderRadius.circular(radius),
      child: GestureDetector(
          onTap: () {
            if (selectOnTap != null) {
              selectOnTap!(model);
            }
          },
          // 如果有删除事件，则显示右上角debug标志
          child: showBanner && model.isOwner != true
              ? AdvancedDebugBanner(
                  text: local.local_tip,
                  child: _body(radius, context),
                )
              : _body(radius, context)),
    );
  }

  // 车辆item主体
  Widget _body(double radius, BuildContext context) {
    double borderWidth = 1;
    Color selectedColor = LxCol.theme;
    Color unselectedColor = GrayColor.gray7.withOpacity(0.1);
    String connectTime = model.connectTimeMillis == null
        ? ""
        : DateFormatUtil.formatTimestamp(model.connectTimeMillis!);
    String createdAt = model.createdTimeMillis == null
        ? ""
        : DateFormatUtil.formatTimestamp(model.createdTimeMillis!);
    return Container(
      decoration: BoxDecoration(
        color: GrayColor.gray2,
        border: Border.all(
          color: model.isSelected ? selectedColor : unselectedColor,
          width: borderWidth,
        ),
        borderRadius: BorderRadius.circular(radius),
      ),
      width: double.infinity,
      height: height,
      child: Stack(
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                padding: EdgeInsets.only(
                  left: CONTENT_MARGIN,
                  right: CONTENT_MARGIN,
                ),
                height: 24.w,
                decoration: BoxDecoration(
                  color: model.isSelected ? selectedColor : unselectedColor,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(radius - borderWidth), // 左上角
                    bottomRight: Radius.circular(radius - borderWidth), // 右下角
                  ),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    LxText(
                      deleteOnTap != null // 显示删除按钮，则显示“认证于”，此时为车辆列表可操作
                          ? context.s.certifie_at(createdAt)
                          : (model.isSelected
                              ? context.s.current_connect_time(connectTime)
                              : context.s.lasted_connect_time(connectTime)),
                      color: Colors.white,
                      fontWeightEnum: LxFontWeightEnum.bodySmall,
                      textAlign: TextAlign.center,
                    ),
                  ],
                ),
              ),
              Expanded(
                child: Container(
                  padding: EdgeInsets.only(left: CONTENT_MARGIN),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Obx(
                        () => LxText(
                          model.nickname.value.isEmpty
                              ? model.bleName
                              : model.nickname.value,
                          color: Colors.white,
                          fontWeightEnum: LxFontWeightEnum.titleMedium,
                        ),
                      ),
                      LxText(
                        "SN: ${model.sn}",
                        color: Colors.white,
                        fontWeightEnum: LxFontWeightEnum.bodySmall,
                      ),
                      Visibility(
                        visible: deleteOnTap != null,
                        child: Visibility(
                          visible: model.isOwner == true,
                          replacement: LxButton(
                            height: 24.w,
                            title: context.s.delete_vehicle,
                            buttonSizeEnum: ButtonSizeEnum.small,
                            buttonAlignmentEnum: ButtonAlignmentEnum.adaptive,
                            onTap: () {
                              if (deleteOnTap != null) {
                                deleteOnTap!(model);
                              }
                            },
                          ),
                          child: Image.asset(
                            R.authArrowIcon,
                            width: 24.w,
                            fit: BoxFit.fitWidth,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
          Align(
            alignment: Alignment.centerRight,
            child: Padding(
              padding: EdgeInsets.only(
                top: CONTENT_MARGIN,
                bottom: CONTENT_MARGIN,
                right: CONTENT_MARGIN,
              ),
              child: Container(
                color: Colors.transparent,
                alignment: Alignment.centerRight,
                height: double.infinity,
                width: 200.w,
                child: Image.asset(
                  model.vehicleType.assetPath,
                  fit: BoxFit.fitWidth,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
